import React from 'react'
import Swiper from './SwiperComponent'
import styles from '../../css/UploadImgs.module.css'
import flex_styles from '../../css/flex.module.css'

class ShowImgList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  showImg = (e) => {
    e.stopPropagation()
    this.setState({
      showImg: !this.state.showImg
    })
  }
  render() {
    const { imgList, isAll, isShowAll } = this.props
    let len = 0
    let list = imgList
    if (!isAll) {
      len = imgList.length - 3;
      list = imgList.slice(0, 3)
    }
    let showImglist = []
    for (let i = 0; i < list.length; i++) {
      if (list[i].imgurl !== '') {
        showImglist.push(
          <ImgItem
            key={i}
            imgurl={list[i].imgurl}
            index={i}
            len={len > 0 ? len : '0'}
            showImg={this.showImg}
            isAll={isAll}
          />
          // <img key={index} src={item.url} />
        )
      }
    }
    return (

      <div className={styles['showImg_list']}>
        {
          showImglist
        }
        {isShowAll && this.state.showImg &&
          <div style={maskStyle}>
            <div
              style={maskCloseStyle}
              onClick={this.showImg}
            >
              关闭
        </div>
            {/* <Swiper height='500' imgList={imgList.slice(0, imgList.length - 1)} /> */}
            <Swiper height='500' imgList={imgList} />
          </div>

        }
      </div>
    )
  }
}

class ImgItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgurl: ''
    }
  }
  componentDidMount() {
    const that = this
    const imgurl = this.props.imgurl
    const image = new Image()
    image.onload = function (imgurl) {
      that.setState({
        width: this.width,
        height: this.height
      })
    }
    image.src = imgurl
  }
  // showImg=(index,e)=>{

  //   this.props.showImg()
  // }
  render() {
    const { imgurl, index, showImg, len, isAll } = this.props
    const { width, height } = this.state
    return (
      <div
        className={styles['showImg_item']}
        onClick={(e) => {
          return showImg(e)
        }}
        style={{
          marginLeft: index % 3 ? '2%' : '0'
        }}
      >
        <div
          className={flex_styles['flex_center']}
          style={{
            height: '100%',
          }}
        >

          {/* <div className={styles['showImg_item_img']}> */}
          <img
            style={{
              ...itemStyle,
              width: width <= height ? '105px' : 'auto',
              height: width > height ? '105px' : 'auto'
            }}
            src={imgurl}
            alt=''
          />
          {(index === 2 && !isAll && len > 0) &&
            <div style={eMask}>
              <div style={{height: '100%',
  background: 'rgba(0,0,0,0.3)',}} className={flex_styles.flex_center}>
                +{len}张
              </div>
            </div>
          }
        </div>
      </div>
    )
  }
}
const eMask = {
  width: '100%',
  height: '100%',
  background: 'rgba(0,0,0,0.3)',
  fontSize: '16px',
  color: '#fff',
  position: 'absolute',
  top: '0',
  left: '0',
}
const itemStyle = {
  display: 'block',
  borderRadius: '8px',
}
const maskStyle = {
  position: 'fixed',
  top: '0',
  left: '0',
  zIndex: '99',
  width: '100%',
  height: '100%',
  background: 'rgba(0,0,0,0.3)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}
const maskCloseStyle = {
  position: 'absolute',
  top: '10px',
  right: '10px',
  zIndex: '12',
  fontSize: '14px',
  color: '#fff'
}
export default ShowImgList